<template>
<!-- 直播详情页 - 直播数据分析- 6 34 -->
  <div id="liveData">
    <div class="Box01" v-if="vipRootObj[6][34].owner">
      <div class="Item01" style="width: 52%">
        <div class="titleBoxWhat">
          <img src="@/assets/meng/hot_analyse02.png" alt="" />
          <span>直播间流量趋势</span>
        </div>
        <section v-if="finish01 && trendData.xData01.length != 0">
          <div class="dataBox01">
            <!-- <p>
              进场观众<span>{{
                format_num(liveTrendList.liveTrendListOne.sumCount)
              }}</span>
            </p> -->
            <div>
              进场峰值<span>{{
                format_num(liveTrendList.liveTrendListOne.peakNum)
              }}</span>
            </div>
            <div>
              峰值时间<span>{{
                timestamp(liveTrendList.liveTrendListOne.peakUnix, "h:m:s")
              }}</span>
            </div>
            <!-- <p>
              在线观众<span>{{
                format_num(liveTrendList.liveTrendListTwo.sumCount)
              }}</span>
            </p> -->
            <div>
              在线峰值<span>{{
                format_num(liveTrendList.liveTrendListTwo.peakNum)
              }}</span>
            </div>
            <div>
              峰值时间<span>{{
                timestamp(liveTrendList.liveTrendListTwo.peakUnix, "h:m:s")
              }}</span>
            </div>
          </div>

            
            

          <div class="chartBox">
            <CategoryOne
              :xData="trendData.xData01"
              :y1Data="trendData.y1Data01"
              :y2Data="trendData.y2Data01"
              name1="进场观众"
              name2="在线观众"
              formatter="1"
            />
          </div>
        </section>
        <div
          v-loading="!finish01"
          v-if="!finish01"
          class="loading loading01"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <div v-if="finish01 && trendData.xData01.length == 0" class="noDataClasswl">
          目前没有可以查看的数据哟~
        </div>
      </div>
      <div class="Item01" style="width: 48%">
        <div class="titleBoxWhat">
          <img src="@/assets/meng/video04_03.png" alt="" />
          <span>直播间点赞趋势</span>
        </div>
        <section v-if="finish02 && xData02.length != 0">
          <div class="dataBox01">
            <div>
              累计点赞数<span>{{ format_num(zanList.sumCount) }}</span>
            </div>
            <div>
              点赞峰值<span>{{ format_num(zanList.peakNum) }}</span>
            </div>
            <div>
              峰值时间<span>{{ timestamp(zanList.peakUnix, "h:m:s") }}</span>
            </div>
          </div>
          <div class="chartBox">
            <Category
              :xData="xData02"
              :y1Data="y1Data02"
              :y2Data="y2Data02"
              name1="增量"
              name2="总量"
              formatter="1"
            />
          </div>
        </section>
        <div
          v-loading="!finish02"
          v-if="!finish02"
          class="loading loading01"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <div v-if="finish02 && xData02.length == 0" class="noDataClasswl">
          目前没有可以查看的数据哟~
        </div>
      </div>
      <div class="Item01">
        <div class="titleBoxWhat">
          <img src="@/assets/wang/tdetails/fans.png" alt="" />
          <span>粉丝团人数</span>
        </div>
        <section v-if="finish03 && xData03.length != 0">
          <div class="dataBox01">
            <div>
              本场新增粉丝团人数<span>{{
                format_num(fansTeamList.sumCount)
              }}</span>
            </div>
            <div>
              粉丝团人数增量峰值<span>{{
                format_num(fansTeamList.peakNum)
              }}</span>
            </div>
            <div>
              峰值时间<span>{{
                timestamp(fansTeamList.peakUnix, "h:m:s")
              }}</span>
            </div>
          </div>
          <div class="chartBox">
            <Category
              :xData="xData03"
              :y1Data="y1Data03"
              :y2Data="y2Data03"
              name1="增量"
              name2="总量"
              formatter="1"
            />
          </div>
        </section>
        <div
          v-loading="!finish03"
          v-if="!finish03"
          class="loading loading01"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <div v-if="finish03 && xData03.length == 0" class="noDataClasswl">
          目前没有可以查看的数据哟~
        </div>
      </div>
      <div class="Item01">
        <div class="titleBoxWhat">
          <img src="@/assets/wang/live/rateAdd.png" alt="" />
          <span>直播涨粉趋势</span>
        </div>
        <section v-if="finish04 && xData04.length != 0">
          <div class="dataBox01">
            <div>
              累计涨粉数<span>{{ format_num(addFans.sumCount) }}</span>
            </div>
            <div>
              涨粉峰值<span>{{ format_num(addFans.peakNum) }}</span>
            </div>
            <div>
              峰值时间<span>{{ timestamp(addFans.peakUnix, "h:m:s") }}</span>
            </div>
          </div>
          <div class="chartBox">
            <Category
              :xData="xData04"
              :y1Data="y1Data04"
              :y2Data="y2Data04"
              name1="增量"
              name2="总量"
              formatter="1"
            />
          </div>
        </section>
        <div
          v-loading="!finish04"
          v-if="!finish04"
          class="loading loading01"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <div v-if="finish04 && xData04.length == 0" class="noDataClasswl">
          目前没有可以查看的数据哟~
        </div>
      </div>
    </div>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <img
        :src="$global.staticUrl + 'image/egImg/liveData.jpg'"
        class="egBgImg"
      />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip routerName="liveData" :lowestVipNum="this.vipRootObj[6][34].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Category from "@/pages/wang/talent/tdetails/component/Category.vue";
import CategoryOne from "@/pages/wang/talent/tdetails/component/CategoryOne.vue";
export default {
  name: "",
  components: { Category, CategoryOne },
  data() {
    return {
      trendData: {
        xData01: [],
        y1Data0: [],
        y2Data01: [],
      },
      liveTrendList: {
        liveTrendListOne: {},
        liveTrendListTwo: {},
      },
      // 粉丝趋势
      wordData: [],
      showWord: false,
      cancel: null,
      cancel01: null,
      viewsList: {}, //累计观看人次
      xData01: [],
      y1Data0: [],
      y2Data01: [],
      finish01: false,
      zanList: {}, //直播间点赞趋势
      xData02: [],
      y1Data02: [],
      y2Data02: [],
      finish02: false,
      fansTeamList: {}, //粉丝团人数
      xData03: [],
      y1Data03: [],
      y2Data03: [],
      finish03: false,
      addFans: {}, //直播涨粉趋势
      xData04: [],
      y1Data04: [],
      y2Data04: [],
      finish04: false,
      musicList: {}, //音浪收入
      xData05: [],
      y1Data05: [],
      y2Data05: [],
      finish05: false,
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.vipRootObj[6][34].owner) { //判断是否有权限调用
      this.getData(0);
      this.getData(1);
      this.getData(2);
      this.getData(3);
      this.getData(4);
      this.getWord();
      this.getLiveDataAnalysis();
    }
  },
  mounted() {},

  methods: {
    // 折线图
    getData(type) {
      let that = this;
      that.$axios
        .get(
          "/api/live/trend",
          {
            params: {
              roomId: that.$route.params.id,
              type: type,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            }),
          }
        )
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            if (type == 1) {
              that.zanList = res.data.data;
              if (res.data.data.dataUnix != null) {
                // x
                res.data.data.dataUnix.forEach((element) => {
                  that.xData02.push(that.timestamp(element, "h:m:s"));
                  return that.xData02;
                });
                // y1
                that.y1Data02 = res.data.data.trendData[1];
                that.y2Data02 = res.data.data.trendData[0];
              }
              that.finish02 = true;
            }

            if (type == 2) {
              that.fansTeamList = res.data.data;
              if (res.data.data.dataUnix != null) {
                // x
                res.data.data.dataUnix.forEach((element) => {
                  that.xData03.push(that.timestamp(element, "h:m:s"));
                  return that.xData03;
                });
                // y1
                that.y1Data03 = res.data.data.trendData[1];
                that.y2Data03 = res.data.data.trendData[0];
              }
              that.finish03 = true;
            }
            if (type == 3) {
              that.addFans = res.data.data;
              if (res.data.data.dataUnix != null) {
                // x
                res.data.data.dataUnix.forEach((element) => {
                  that.xData04.push(that.timestamp(element, "h:m:s"));
                  return that.xData04;
                });
                // y1
                that.y1Data04 = res.data.data.trendData[1];
                that.y2Data04 = res.data.data.trendData[0];
              }
              that.finish04 = true;
            }
            if (type == 4) {
              that.musicList = res.data.data;
              if (res.data.data.dataUnix != null) {
                // x
                res.data.data.dataUnix.forEach((element) => {
                  that.xData05.push(that.timestamp(element, "h:m:s"));
                  return that.xData05;
                });
                // y1
                that.y1Data05 = res.data.data.trendData[1];
                that.y2Data05 = res.data.data.trendData[0];
              }
              that.finish05 = true;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getLiveDataAnalysis() {
      let that = this;
      that.$axios
        .get("/api/live/GetLiveFlow", {
          params: {
            room_id: that.$route.params.id,
          },
        })
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            res.data.data.trendData[0].forEach((element) => {
              that.trendData.xData01.push(that.timestamp(element, "h:m:s"));
              return that.trendData.xData01;
            });
            this.trendData.y1Data01 = res.data.data.trendData[1];
            this.trendData.y2Data01 = res.data.data.trendData[2];
            this.liveTrendList.liveTrendListOne = res.data.data.liveTrendList[0];
            this.liveTrendList.liveTrendListTwo = res.data.data.liveTrendList[1];
            that.finish01 = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 弹幕词云
    getWord() {
      let that = this;
      that.$axios
        .get(
          "/api/live/word",
          {
            params: {
              roomId: that.$route.params.id,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.wordData = res.data.data;
            that.showWord = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style lang='less' scoped>
#liveData {
  .Box01 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 36px;
    .loading01 {
      margin-top: 250px;
    }
    .Item01 {
      padding-top: 50px;
      width: 50%;
      height: 550px;
      section {
        width: 100%;
        .dataBox01 {
          width: 100%;
          // padding: 0 30px;
          padding-top: 10px;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          div {
            // flex: 1 1 auto;
            // flex: 1;
            // width: auto;
            font-size: 14px;
            color: #555555;
            text-align: center;
            padding: 0 12px;
            box-sizing: border-box;
            span {
              font-family: DINAlternate-Bold;
              font-size: 18px;
              color: #1779ff;
              padding-left: 9px;
            }
          }
          p:last-child {
            padding: 0;
          }
        }
      }
      .chartBox {
        width: 100%;
        height: 100%;
      }
    }
    .Item01:nth-of-type(2n) {
      box-sizing: border-box;
      // padding-left: 20px;
    }
  }
}
</style>